import React, { useMemo } from 'react'
import { useEffect,useState } from 'react';
import store from '../redux/store';
import getCinemaList from '../actionCreator/getCinemaList';

export default function Search(props) {
    const [value, setvalue] = useState('')
    const [cinemaList,setcinemaList] = useState(store.getState().CinemaListReducer.list);
    useEffect(()=>{
        if(store.getState().CinemaListReducer.list.length === 0){    //使用store进行缓存
          store.dispatch(getCinemaList());
        }

        var unsubscribe = store.subscribe(()=>{
          setcinemaList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
          unsubscribe()
        }
    })
    var filterList = useMemo(()=>
         cinemaList.filter(item => item.name.toUpperCase().includes(value.toUpperCase()))
    ,[value,cinemaList])
  return (
    <div>
        <div onClick={()=>{
            props.history.goBack();
        }}>返回</div>
        <input onChange={(evt)=>{
            setvalue(evt.target.value)
            console.log(evt.target.value)
        }}></input>
        {
            filterList.map(item =>
                <div key={item.cinemaId}>{item.name}</div>
            )
        }
    </div>
  )
}
